import React from 'react';
import {
  Link,
  NavLink
} from 'react-router-dom';

class NavSide extends React.Component{
  constructor(props){
    super(props)
  }
  render(){
    return (
      <div className="navbar-default navbar-side">
        <div className="sidebar-collapse">
          <ul className="nav">
            <li>
                <NavLink exact to="/" activeClassName="active-menu">
                  <i className="fa fa-dashboard"></i>
                  <span>首页</span>
                </NavLink>
            </li>
            <li className="active">
              <Link to="/product">
                <i className="fa fa-list"></i>
                <span>商品</span>
                <span className="fa arrow"></span>
              </Link>
              {/* 二级菜单 */}
              <ul className="nav nav-second-level collapse in">
                <li>
                  <NavLink to="/product" activeClassName="active-menu">
                    商品管理
                  </NavLink>
                </li>
                <li>
                  <NavLink  to="/product-category" activeClassName="active-menu">
                    品类管理
                  </NavLink>
                </li>
              </ul>
            </li>
            <li className="active">
              <Link to="/order">
                <i className="fa fa-check-square-o"></i>
                <span>订单</span>
                <span className="fa arrow"></span>
              </Link>
              {/* 二级菜单 */}
              <ul className="nav nav-second-level collapse in">
                <li>
                  <NavLink to='/order' activeClassName="active-menu">订单管理</NavLink>
                </li>
              </ul>
            </li>
            <li className="active">
              <Link to="/user">
                <i className="fa fa-user-o"></i>
                <span>用户</span>
                <span className="fa arrow"></span>
              </Link>
              {/* 二级菜单 */}
              <ul className="nav nav-second-level collapse in">
                <li>
                  <NavLink to='/user' activeClassName="active-menu">
                    用户管理
                  </NavLink>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    );
  }
}

export default NavSide;